<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>添加用户资料</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="./layui/css/layui.css">
  <link rel="stylesheet" href="./css/style.css">
  <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
  <script src="js/resize.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

  <div class="layui-header">
    <div class="layui-logo"><img src="images/logo.jpg" alt="思联画饰"></div>
    <!-- 头部区域（可配合layui已有的水平导航） -->

    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item serach">
        <a href="javascript:;">
          <img src="images/serach.jpg">
        </a>
      </li>
      <li class="layui-nav-item mess">
        <a href="javascript:;">
          <img src="images/mess.jpg">
        </a>
      </li>
      <li class="layui-nav-item">
        <a href="javascript:;" class="user">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          <span class="username">JunieLuo.KK</span>
        </a>
        
      </li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <a class="menu-btn" href="javascript:;"><i class="layui-icon layui-icon-spread-left" id="LAY_app_flexible"></i></a>
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <!-- <li class="layui-nav-item layui-nav-itemed" ><a href="javascript:;">首页</a></li> -->
        <li class="layui-nav-item">
          <a href="javascript:;">业务管理</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">商品浏览</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">销售管理</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">订单管理</a></dd>
            <dd><a href="javascript:;">购物清单</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">客户通讯录</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">群主管理</a></dd>
            <dd><a href="javascript:;">添加用户</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">统计及报告</a>
        </li>
      </ul>
      <a href="javascript:;" class="layui-btn layui-btn1">退出</a>
    </div>
  </div>
  
  <div class="layui-body form-block">
      <div class="fm-wd">
        <div class="form-main">
          <h2>用户资料</h2>
          <div class="form-content">
            <form class="layui-form" action="">
              <div class="layui-form-item">
                <div class="ly-select company-select">
                  <select  name="" lay-verify="" lay-search>
                    <option value="">选公司名称</option>
                    <option value="010">广东展览会名称有限公司</option>
                    <option value="021">上海会名称展览有限公司</option>
                    <option value="021">北京会名称展览有限公司</option>
                  </select>   
                </div> 
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block layui-input-block1">
                  <input type="text" name="" lay-verify="" autocomplete="off" placeholder="姓名*" class="layui-input layui-input-wd1">
                  <input type="text" name="" lay-verify="" autocomplete="off" placeholder="职务" class="layui-input layui-input-wd1">
                  <div class="ly-select source-select">
                    <select  name="" lay-verify="">
                      <option value="">客户来源</option>
                      <option value="010">客户来源</option>
                      <option value="021">客户来源</option>
                      <option value="021">客户来源</option>
                    </select>   
                  </div>
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block layui-input-block1">
                  <input type="text" name="" lay-verify="" autocomplete="off" placeholder="第一个电子邮箱*" class="layui-input layui-input-wd1">
                  <input type="text" name="" lay-verify="" autocomplete="off" placeholder="第二个电子邮箱" class="layui-input layui-input-wd1">
                  <input type="text" name="" lay-verify="" autocomplete="off" placeholder="第三个电子邮箱" class="layui-input layui-input-wd1 layui-input-wd-last">
                </div>
              </div>
              <div class="line"></div>
              <div class="item layui-form-item">
                <div class="s-item-1">
                  <div class="ly-select phone-select">
                    <select  name="" lay-verify="">
                      <option value="">+86(中国大陆)</option>
                      <option value="010">中国大陆</option>
                      <option value="021">华南</option>
                      <option value="021">华北</option>
                    </select>   
                  </div>
                  <div class="input-item input-item-2"><input type="text" name="" lay-verify="" autocomplete="off" placeholder="第一个移动号码*" class="layui-input layui-input-wd1"></div>
                </div>
                <div class="s-item-1">
                  <div class="ly-select phone-select">
                    <select  name="" lay-verify="">
                      <option value="">+86(中国大陆)</option>
                      <option value="010">中国大陆</option>
                      <option value="021">华南</option>
                      <option value="021">华北</option>
                    </select>   
                  </div>
                  <div class="input-item input-item-2"><input type="text" name="" lay-verify="" autocomplete="off" placeholder="第二个移动号码" class="layui-input layui-input-wd1"></div>
                </div>
                <div class="s-item-1 s-item-1-last">
                  <div class="ly-select phone-select">
                    <select  name="" lay-verify="">
                      <option value="">+86(中国大陆)</option>
                      <option value="010">中国大陆</option>
                      <option value="021">华南</option>
                      <option value="021">华北</option>
                    </select>   
                  </div>
                  <div class="input-item input-item-2 empty-sty"><input type="text" name="" lay-verify="" autocomplete="off" placeholder="第三个移动号码" class="layui-input layui-input-wd1"></div>
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button type="submit" class="layui-btn layui-btn-1" lay-submit="" lay-filter="demo1">保存</button>
                  <button type="reset" class="layui-btn layui-btn-2">返回</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
  </div>
  
</div>

<div class="ly-pop tip-block" style="display:none">
  <div class="ly-pop-title">
    <h3>系统提示</h3>
    <p>匹配数据库发现有存在重复数据<span>4</span></p>
    <p>请仔细核对资料，若填入信息没有错，请再次提交，感谢合作！</p>
  </div>
  <div class="ly-pop-cont">
    <div class="ly-pop-item">
      <h4>姓名*</h4>
      <div class="ly-pop-input">克里斯蒂亚诺·罗纳尔多</div>
    </div>
    <div class="ly-pop-item">
      <h4>公司名称*</h4>
      <div class="ly-pop-input">家私装饰有限公司</div>
    </div>

    <div class="ly-pop-item">
      <h4>职务职称*</h4>
      <div class="ly-pop-input">董事长</div>
    </div>

    <div class="ly-pop-item">
      <h4>固定电话*</h4>
      <div class="ly-pop-input">020-83301257 | 0755-83238329 | 010-23928381</div>
    </div>

    <div class="ly-pop-item">
      <h4>移动号码*</h4>
      <div class="ly-pop-input"><span>13632394056</span>|13632394056|13632394056</div>
    </div>

    <div class="ly-pop-item">
      <h4>电子邮箱*</h4>
      <div class="ly-pop-input">JunieLuo.KK@yahoo.com|<span>JunieLuo.KK@yahoo.com</span></div>
    </div>
  </div>
  <div class="ly-pop-btn">
    <button type="button" class="layui-btn ly-pop-btn-1">提交</button>
    <button type="button" class="layui-btn ly-pop-btn-2 back-btn">返回</button>
  </div>
</div>

<script src="./layui/layui.js"></script>
<script>

$(document).on('click','.menu-btn',function(){
  if($(this).find('i').hasClass('layui-icon-shrink-right')){
    $(this).find('i').removeClass('layui-icon-shrink-right');
    $(this).find('i').addClass('layui-icon-spread-left');
    $('.layui-layout-admin .layui-side').animate({
      width:"0"
    },200);

    $('.layui-layout-admin .layui-logo').animate({
      width:"0"
    },200);

    $('.menu-btn').animate({
      left:"10"
    },200);
    $('.layui-layout-admin .layui-body').animate({
      left:"0"
    },200);
  }else{
    $(this).find('i').removeClass('layui-icon-spread-left');
    $(this).find('i').addClass('layui-icon-shrink-right');
    $('.layui-layout-admin .layui-side').animate({
      width:"200px"
    },200);

    $('.layui-layout-admin .layui-logo').animate({
      width:"200px"
    },200);

    $('.menu-btn').animate({
      left:"200px"
    },200);
    $('.layui-layout-admin .layui-body').animate({
      left:"200px"
    },200);
  }
})
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  
});

//Demo
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer

  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
  });
  
  
  //监听提交
  form.on('submit(demo1)', function(data){
    layer.open({
      type: 1,
      title : '',
      skin: 'ly-out-1', //样式类名
      area: ['5.45rem', 'auto'],
      closeBtn: 0, //不显示关闭按钮
      anim: 2,
      shadeClose: true, //开启遮罩关闭
      content: $('.tip-block')
    });
    return false;
  });
 


});


//弹出层系统提示
var layer;
layui.use('layer', function(){
  layer = layui.layer;

})

$(document).on('click','.layui-input-block .layui-btn-2',function(){
    
})

$(document).on('click','.back-btn',function(){
    layer.closeAll();
})

</script>
</body>
</html>